<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>什么值得买排行榜</title>
    <link rel="stylesheet" href="styles/icon.css" />
    <link rel="stylesheet" href="styles/style.css" />
  </head>
  <body>
    <div class="page">
      <header class="top">
        <div class="top-title">排行榜</div>
        <nav class="tabs">
          <ul>
            <li class="tab-item tab-active">好文精选</li>
            <li class="tab-item">热门资讯</li>
          </ul>
        </nav>
        <nav class="cats">
          <ul class="cat-list">
            <li class="cat-item cat-active">文章</li>
          </ul>
        </nav>
      </header>
      <main class="list">
        <a href="#" class="sku">
          <div class="content">
            <div class="cover" style="position: relative">
              <div
                class="cover-img"
                style="width: 100%; height: 180px; border-radius: 4px"
              >
                <img src="imgs\屏幕截图 2025-09-24 202839.png" alt="11" />
              </div>
              <div
                class="cover-rank"
                style="
                  position: absolute;
                  top: 10px;
                  left: 10px;
                  background-color: #d92929;
                  color: #fff;
                  padding: 2px 8px;
                  border-radius: 3px;
                  font-size: 12px;
                "
              >
                TOP1
              </div>
            </div>
            <div class="info">
              <div class="sku-title">安卓电视通过KODI看IPTV</div>
              <div class="desc">
                <i class="iconfont icon-comment"></i>
                <span class="desc-number">105</span>
                <i class="iconfont icon-zhi"></i>
                <span class="desc-number">345</span>
              </div>
            </div>
          </div>
        </a>
        <a href="#" class="sku">
          <div class="content">
            <div class="cover" style="position: relative">
              <div
                class="cover-img"
                style="
                  width: 100%;
                  height: 180px;
                  background-color: #eee;
                  border-radius: 4px;
                "
              >
                <img src="imgs\屏幕截图 2025-09-24 202853.png" alt="222" />
              </div>
              <div
                class="cover-rank"
                style="
                  position: absolute;
                  top: 10px;
                  left: 10px;
                  background-color: #d92929;
                  color: #fff;
                  padding: 2px 8px;
                  border-radius: 3px;
                  font-size: 12px;
                "
              >
                TOP2
              </div>
            </div>
            <div class="info">
              <div class="sku-title">
                起跑线26期：5km跑步，你到了哪一级别？学会这几个跑步技巧，祝你提升PB
              </div>
              <div class="types">
                <span
                  class="type-item"
                  style="
                    background-color: #f5f5f5;
                    color: #d92929;
                    padding: 2px 6px;
                    border-radius: 3px;
                  "
                  ># 跑者</span
                >
              </div>
              <div class="desc">
                <i class="iconfont icon-comment"></i>
                <span class="desc-number">151</span>
                <i class="iconfont icon-zhi"></i>
                <span class="desc-number">132</span>
              </div>
            </div>
          </div>
        </a>
        <a href="#" class="sku">
          <div class="content">
            <div class="cover" style="position: relative">
              <div
                class="cover-img"
                style="
                  width: 100%;
                  height: 180px;
                  background-color: #eee;
                  border-radius: 4px;
                "
              >
                <img src="imgs\屏幕截图 2025-09-24 210730.png" alt="333" />
              </div>
              <div
                class="cover-rank"
                style="
                  position: absolute;
                  top: 10px;
                  left: 10px;
                  background-color: #d92929;
                  color: #fff;
                  padding: 2px 8px;
                  border-radius: 3px;
                  font-size: 12px;
                "
              >
                TOP3
              </div>
            </div>
            <div class="info">
              <div class="sku-title"></div>
            </div>
          </div>
        </a>
      </main>
    </div>
  </body>
</html>
